.button1 {display: inline-block;outline: none;cursor: default;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: 0.5em 1.7em 0.38em;-webkit-border-radius: .2em; -moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.button2 {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 12px/100% Segoe UI, Arial;padding:0.2em 1.1em 0.30em;-webkit-border-radius: .2em; -moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.button2:hover {text-decoration: none;color: #e89e00;}
.button2:active {position: relative;top: 1px;}
.button1:hover {text-decoration: none;color: #e89e00;}
.button1:active {position: relative;top: 1px;}
.button2 {display: inline-block;outline: none;cursor: default;text-align: center;text-decoration: none;font: 12px/100% Arial, Helvetica, sans-serif;padding: .3em 1.1em .53em;-webkit-border-radius: .2em; -moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.button2:hover {text-decoration: none;color: #e89e00;}
.button2:active {position: relative;top: 1px;}
.orange {color: #FFFFFF;border: solid 1px #0054ff;background: #1e5ff7;background: -webkit-gradient(linear, left top, left bottom, from(#2467ff), to(#004eff));background: -moz-linear-gradient(top,  #2467ff,  #004eff);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2467ff', endColorstr='#004eff');}
.orange:hover {color: #FFFFFF;background: #1e5ff7;background: -webkit-gradient(linear, left top, left bottom, from(#2467ff), to(#0042d9));background: -moz-linear-gradient(top,  #2467ff,  #0042d9);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2467ff', endColorstr='#0042d9');}
.orange:active {box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;}
.input {border: 1px solid #D8D8D8;}
.input:hover {border: 1px solid #b4b4b4;}
.input:focus {border: 1px solid #4c89f9;}
.input2 {background:url(http://upload.kapanlagi.com/c.php?f=201108101916212_rss_4e42769597bda.jpeg) no-repeat 5px 3px #FFFFFF;
border: 1px solid #D8D8D8;text-indent:30px;border-radius: 5px 5px 5px 5px;color: #000000;}
#mimins-ganteng {
  position: relative;
  width: 100%;  
 }

 #mimins-ganteng:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
 }

 #menu {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 20px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
  background: #ccc; 
 }

 #menu, #menu ul {
  list-style: none;
 }

 #menu > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);
  perspective: 1000px;
  
 }

 #menu > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
 }

 #menu a {
  display: block;
  position: relative;
  z-index: 10;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  color: rgba(75,75,75,1);
  line-height: 1;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -.05em;
  background: transparent;  
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  transition: all .25s ease-in-out;
 
 }

 #menu > li:hover > a {
  background: #333;
  color: rgba(0,223,252,1);
  text-shadow: none;
 }

 #menu li ul  {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  transform-origin: 50% 0%;
 }


 #menu li:hover ul {
  
  padding: 15px 0;
  background: #333;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);
  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;

 }

 @keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }

  30% {   
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }

  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }

  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
 }

 #menu li li a {
  padding-left: 15px;
  font-weight: 400;
  color: #ddd;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  transition: all .15s linear;
 }

 #menu li li a:hover {
  color: rgba(0,223,252,1);
  border-top: dotted 1px rgba(255,255,255,.15);
  border-bottom: dotted 1px rgba(255,255,255,.15);
  background: rgba(0,223,252,.02);
 }
.menubottompic {
background: url(&quot;http://2.bp.blogspot.com/-nIN7sgCblk0/UPsFhnR2hkI/AAAAAAAAIwo/qlkN84k7LOI/s400/mbt-footer.png&quot;) repeat-x scroll left top transparent;
width: 100%;
height: 60px;
margin: 10px auto -15px;
position: relative;
z-index: 9999;
}
#menubottom-container {
width:950px;
margin:0px auto;
padding:0px;
}
.menubottom{float:left; margin:0 auto;padding:15px 0}
.menubottom ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px Arial,sans-serif;margin:0}
.menubottom li{display:inline;margin:0}
.menubottom li a{border-right:1px solid #333; float:left;display:block;text-decoration:none;color:#ddd;line-height:1.5em;padding:0px 12px; font-weight:bold;}
.menubottom li a:hover{text-decoration:underline; color:#fff;}
#backtotop {
float: right;
background: url(&quot;http://3.bp.blogspot.com/-jvQe09ZvO_U/UOGAcesyjUI/AAAAAAAAIck/T87TeU9DSNo/s400/back-top.png&quot;) no-repeat scroll 100% 57% transparent;
padding-right: 26px;
padding-top: 4px;
}
#backtotop a, #backtotop a:visited {
color: #ddd;
text-decoration: none;
display: block;
font-weight: bold;
font-family: arial;
}
#backtotop  a:hover {color:#fff;}
#wp-admin-bar {display: block !important;position: top !important; z-index: 66 !important;height: 20px !important; margin: 0 !important;padding: 2px !important;background: #14568A !important;border: 1px solid #666 !important;border-right: none !important;border-bottom:1px solid #3285ae !important;font:10px &quot;Arial&quot; !important;color: #fff !important;clear: both !important;text-align: left !important;float: left !important;background: #14568a no-repeat 40% 0;}#wp-admin-bar-right {display: block;position: top;z-index: 66;height: 20px; margin: 0; padding: 2px; background: #14568A;border: 1px solid #666;border-left: none;border-bottom:1px solid #3285ae;font:10px &quot;Arial&quot;;color: #fff;clear: both;text-align: right;float: right;background: #14568a no-repeat 100% 0;}#wp-admin-bar {position: fixed;top: 0 !important;left: 0 !important;width: 70% !important;}#wp-admin-bar-right {position: fixed;top: 0 !important;right: 0 !important;width: 30% !important;}#wp-admin-bar ul, #wp-admin-bar-right ul {margin: 0 !important;padding: 0 !important;list-style-type: none !important;}#wp-admin-bar ul li, #wp-admin-bar-right ul li {list-style-type: none !important;display: inline !important;margin: 0 3px !important;padding: 0 !important;font:11px &quot;Arial&quot; !important;color: #fff !important;}#wp-admin-bar ul li.login, #wp-admin-bar-right ul li.login { margin-right: 30px; }#wp-admin-bar strong, #wp-admin-bar-right strong { font-weight: bold; }#wp-admin-bar a, #wp-admin-bar-right a { color: #fff; }#wp-admin-bar a:link, #wp-admin-bar-right a:link { color: #fff !important; border:none; }#wp-admin-bar a:visited, #wp-admin-bar-right a:visited { color: #fff; border:none; }#wp-admin-bar a:hover, #wp-admin-bar-right a:hover { color: #488cff; }sidebar6 ul,.sidebar7 ul{list-style:none;margin:0;padding:0}.pic_artikel {font:normal 11px Arial, Helvetica, sans-serif;padding-bottom:5px;color:#666;margin-bottom:10px;width:450px;} .pic_artikel img {display:block;padding-bottom:4px;width:450px;}
#beakingnews{line-height:25px;height:25px;background:#ffffff;overflow:hidden}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 8px;margin:0 8px 0 0;background-color:#0F83A0;color:white;font-weight:bold;line-height:28px;height:30px;font-size:110%}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
form#shorturl {
font-size:11px
}#shorturl input {
color:#000000;
}
.tanggal, .penulis, .kategori { background: url(http://3.bp.blogspot.com/-yBz6IcUu7FI/Ty5sImoQodI/AAAAAAAAAQU/zaQDzfXcpRw/s320/icons.png) no-repeat }
.date { padding:0px; float:right; text-align:right; font-weight:normal; font-size:13px; margin:0 0 0 13px; }
.tanggal {background-position: 3px -66px; height:16px; padding:0 0 0 23px; color:#333; }
.info{margin-top:-7px;padding-top:-5px;line-height:2em;font-size:13px; text-align:left; }
.penulis {background-position:3px 0; height:16px; padding:0 0 0 23px; color:#333; margin-right:6px; }
.kategori {background-position:3px -22px; height:16px; padding:0 0 0 23px; margin:0 0 0 4px }
.labelatas{position:absolute;right:5px;bottom:5px}
.labelatas a{float:left;display:block;padding:2px 6px;background-color:#EBEBEB;margin-right:2px;border:1px solid #DDD}
@media only screen and (min-width:768px) and (max-width:959px){
  .labelatas{right:-9999px}
  .infox{top:2px;right:2px}
  #related_posts li{padding:7px 5px 7px 0;height:120px}
}
@media only screen and (max-width:767px){
  .pager-isi a,.pager-isi .linkgrey,#related_posts li{width:100%}
  a.blog-pager-older-link{padding-right:25px}
  a.blog-pager-newer-link{padding-left:25px}
  .labelatas{right:-9999px}
  .infox{top:2px;right:2px}
  .post h1{font-size:140%}
}
@media only screen and (max-width:479px){
  .post h1{font-size:120%}
}
#pra-comment{
position: relative;
background:#F3C5C5;
width:100%;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #AD3000;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
    top: 100%;
    border: solid transparent;
    content: &quot; &quot;;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }

#pra-comment::before {
    border-top-color: #AD3000;
    border-width: 15px;
    left: 10%;
    margin-left: -36px
    }

#pra-comment::after {
    border-top-color: #F3C5C5; /* Samakan dengan warna background */
    border-width: 9px;
    left: 10%;
    margin-left: -30px
    }
.button-konverter {
border: 2px solid #555;
color: #111;
cursor: pointer;
font-size: 11px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
margin-right:5px;
padding:2px 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background: -moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39; #ededed&#39; ,endColorstr=&#39; #dfdfdf&#39; );
background-color: #ededed;
}
.button-konverter:hover {
text-shadow: 1px 1px 0 #f0f7ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background-color:#90c3eb;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=&#39;#cde1fc&#39;, endColorstr=&#39;#90c3eb&#39;);
background-image:-webkit-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-moz-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-ms-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-o-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
}
.button-oot {
border: 2px solid #555;
color: #555;
cursor: pointer;
font-size: 11px;
font-weight: normal;
margin: 15px 0 10px 5px;
padding: 2px 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #f0f7ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background-color:#90c3eb;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=&#39;#cde1fc&#39;, endColorstr=&#39;#90c3eb&#39;);
background-image:-webkit-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-moz-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-ms-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-o-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
}
.button-oot:hover {
text-shadow: 1px 1px 0 #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background: -moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39; #ededed&#39; ,endColorstr=&#39; #dfdfdf&#39; );
background-color: #ededed;
}
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#fff url(&#39;http://1.bp.blogspot.com/-hwDGciedSOI/UYU_0DrMLsI/AAAAAAAAEBg/90Wn6WrO2mY/s1600/loadinfo.net+(6).gif&#39;) no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
font:0/0 a;
text-shadow:none;
}
	</style>
<style type='text/css'>
.review-author {
    background-color: rgba(0,0,0,0.1);
    display: inline-block !important;
    height: 100%;
    width: 100%;
    border: 1px solid #afafaf;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
}
</style>
<style type='text/css'>
#shadow2{  background:url(&quot;http://1.bp.blogspot.com/-PBxSNjm7MZo/USTU7cuB7SI/AAAAAAAAXNY/PhCRSShhNss/s1600/frame_shadow2+copy.png&quot;) no-repeat scroll center center transparent;  height:20px;  width:300px}
#shadow2{  background:url(&quot;http://1.bp.blogspot.com/-PBxSNjm7MZo/USTU7cuB7SI/AAAAAAAAXNY/PhCRSShhNss/s1600/frame_shadow2+copy.png
</style>
<style type='text/css'>
.content {
    width: 278px;
    margin: 0;
    position: relative;
    float: left;
    font-size: 12px;
    line-height: 2em;
    padding: 30px 0 30px;
}

.col {
    width: 280px;
}

#skill {
    list-style: none;
    padding-top: 30px;
}

#skill li {
    margin-bottom: 70px;
    background: #000;
    height: 5px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

#skill li em {
    position: relative;
    top: -30px;
}

.expand {
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}

.html5 {
    width: 70%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.css3 {
    width: 90%;
    -moz-animation: css3 2s ease-out;
    -webkit-animation: css3 2s ease-out;
}

.jquery {
    width: 50%;
    -moz-animation: jquery 2s ease-out;
    -webkit-animation: jquery 2s ease-out;
}

.photoshop {
    width: 10%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

.dreamweaver {
    width: 100%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

@-moz-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-moz-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-moz-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-moz-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    };
}

@-moz-keyframes dreamweaver {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-webkit-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-webkit-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-webkit-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-webkit-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    };
}

@-webkit-keyframes dreamweaver {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}